import { click } from '@testing-library/user-event/dist/click'
import React, { useCallback, useState } from 'react'

export default function Callback() {
    const [count, setCount] = useState(1)
    const handleClick = (() => {
        setCount(count + 1)
    })
    const childClick = useCallback((a) => { console.log(a, 'props'); }, [])
    return (
        <div>
            {count}
            <button onClick={handleClick}>+1</button>
            <Child click={childClick} />
        </div>
    )
}
//只改变父组件值 子组件没改变也会跟着重新渲染 使用React.memo阻止子组件渲染
// function Child() {
//     console.log('子组件被触发');
//     return (
//         <>
//             <p>子组件</p>
//         </>
//     )
// }
// 将子组件包在 React.memo里面即可阻止子组件渲染（前提是父组件传来的props没有发生变化）

const Child = React.memo(function Child(props) {
    console.log('子组件被触发');
    props.click('nihao')
    return (
        <>
            <p>子组件</p>
        </>
    )
})

